<html>
  <head>
  	<style type="text/css">
  		.info {
  			margin-left: 11em;
  		}
		.votes span {
			padding: 1em;
  			background-color: #DDDDDD;
  			cursor: pointer;
  			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
		.chart {
			width: 1000px;
			height: 500px;
			margin: 1em
		}
	</style>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
 
      google.load("visualization", "1", {packages:["corechart"]});
      var chart;
      var topic = getParameterByName("topic");
      google.setOnLoadCallback(start);

      function start() {
          chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
          loadChart();
    	  setInterval(function(){loadChart()}, 500);
    	  $(".votes span").on('click', function(event) {var source = event.target || event.srcElement; vote(source.id)});
      }

  	  function loadChart() {
  		  var topic = getParameterByName("topic");
       	  $.get("/cxf/vote/" + topic + "/stats", function(result) {drawChart(result)});
       	  $(".average").load("/cxf/vote/" + topic + " voting average");
  	  }

      function drawChart(result) {
          var data = google.visualization.arrayToDataTable(result);
          var options = {
            title: 'Votes on ' + topic
          };
          chart.draw(data, options);
      }

      function AjaxFailed(result){ alert(result.status+''+result.statusText); } 
      
      function getParameterByName(name) {
    	    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
    	    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
    	}
      
      function vote(vote) {
    	  $.get("/cxf/vote/"+ topic + "/vote/" + vote, function(){loadChart()});
      }
    </script>
  </head>
<body>
	<div id="chart_div" class="chart"></div>
	<div class="info">
		<div>
			Average: <span class="average" id="average"></span>
		</div>
		<br/>
		<div class="votes">
			<span id="1">1</span> <span id="2">2</span> <span id="3">3</span> <span id="4">4</span> <span id="5">5</span> <span id="6">6</span>
		</div>
	</div>
</body>
</html>
